<template>
  <transition name="slide">
    <div class="active-signup">
      <page-header title="填写活动成员"></page-header>
      <scroll class="signup-content" ref="signupScroll">
        <div>
          <ul class="signup-detail" v-for="item in memberData">
            <li>
              <span style="">姓名</span>
              <p>
                <input v-model="item.name"/>
              </p>
            </li>
            <li>
              <span>身份证</span>
              <p>
                <input v-model="item.idcard"/>
              </p>
            </li>
            <li>
              <span>联系电话</span>
              <p>
                <input v-model="item.phone"/>
              </p>
            </li>
            <li>
              <span>备注</span>
              <p>
                <input v-model="item.remark"/>
              </p>
            </li>
          </ul>
          <div class="logo-wrapper">
            <img src="../../assets/image/logo_2.png" alt="">
            <p>科教链</p>
          </div>
        </div>
      </scroll>
      <ul class="buy">
        <div class="submit" @click="_submit">确认</div>
      </ul>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import PageHeader from 'components/page-header'
  import Scroll from 'components/scroll/scroll'
  export default {
    components: {
      PageHeader,
      Scroll
    },
    data () {
      return {
        id: '',
        data: {},
        memberData: []
      }
    },
    created() {
      this.data = this.$route.query.data
      this.id = this.$route.params.id
      let memberData = this.$route.query.memberData
      for (var i = 0; i < this.data.numb; i++) {
        if (memberData[i]) {
          this.memberData.push(memberData[i])
        } else {
          this.memberData.push({})
        }
      }
    },
    mounted() {
      this._initData()
    },
    methods: {
      _initData() {
      },
      _submit() {
        let data = this.data
        let memberData = []
        this.memberData.forEach(item => {
          if (item.name && item.name !== '' && item.idcard && item.idcard !== '') {
            memberData.push(item)
          }
        })
        let query = {
          data: data,
          memberData: memberData
        }
        this.$router.push({
          path: `/personal/activity/signup/${data.id}/${data.priceid}`,
          query: query
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .slide-enter-active,.slider-leave-active {
    transition: all 0.3s
  }
  .slide-enter,.slide-leave-to {
    transform: translate3d(100%, 0, 0)
  }
  .active-signup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    background-color: #e6e6e6;
    z-index: 992;
    .signup-content{
      height:calc(~"100% - 164px");
      overflow: hidden;
      .signup-info{
        width:100%;
        height: 205px;
        background-color: #ffffff;
        display:flex;
        box-sizing:border-box;
        padding: 28px 20px;
        .pic{
          flex: 0 0 220px;
          width: 220px;
          height: 100%;
          overflow:hidden;
          box-shadow: 0px -3px 7px 0px rgba(0, 0, 0, 0.2);
          border-radius: 8px;
          img{
            width: 100%;
            height: auto;
          }
        }
        .text{
          padding-left: 25px;
          display:flex;
          flex-direction:column;
          justify-content: space-around;
          p{
            font-size: 30px;
            color: #333333;
          }
        }
      }
      .signup-detail{
        margin-top: 20px;
        width: 100%;
        padding:0 20px;
        box-sizing: border-box;
        background-color: #fff;
        li{
          height:80px;
          box-sizing: border-box;
          border-bottom: 1px solid #cccccc;
          display:flex;
          justify-content:space-between;
          align-items: center;
          &:nth-last-child(1) {
            border:none;
          }
          &:nth-child(2) {
            span::before{
              background-image: url('../../assets/image/icon_card.png')
            }
          }
          &:nth-child(3) {
            span::before{
              background-image: url('../../assets/image/icon_phone2.png')
            }
          }
          &:nth-child(4) {
            span::before{
              background-image: url('../../assets/image/icon_remark.png')
            }
          }
          span{
            font-size: 28px;
            color: #333333;
            &::before{
              display: inline-block;
              margin-right: 14px;
              vertical-align: text-bottom;
              content: '';
              width: 34px;
              height: 26px;
              background: url('../../assets/image/icon_person.png') no-repeat center center / auto 26px;
            }
          }
          p{
            font-size: 26px;
            color: #999999;
          }
          .counter{
            display:flex;
            div{
              width: 50px;
              height: 50px;
              border: 1px solid #cccccc;
              font-size: 26px;
              line-height: 50px;
              text-align: center;
              color: #999999;
            }
            div:nth-child(2) {
              width: 84px;
              border-left: none;
              border-right: none;
              color: #19ce29;
            }
          }
        }
      }
      .agreement{
        margin-top: 20px;
        height: 80px;
        background-color: #ffffff;
        display:flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 25px;
        p{
          font-size: 22px;
          color: #999999;
        }
        i{
          width: 24px;
          height: 24px;
          border-radius: 4px;
          box-sizing:border-box;
          border: solid 1px #cccccc;
          margin-right: 14px;
          &.active {
            background-color: #4788f4;
            border-color: #4788f4;
          }
        }
        span{
          font-size: 22px;
          color: #4788f4;
        }
      }
      .logo-wrapper{
        width: 100%;
        height: 164px;
        background-color: #e5e5e5;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        p{
          font-size: 20px;
          color: #cccccc;
          margin-top: 15px;
        }
        img{
          width: 43px;
          height: 43px;
        }
      }
    }
    .buy{
      width: 100%;
      height: 80px;
      background-color: #fff;
      display: flex;
      .submit{
        width: 100%;
        flex: 1;
        background-color: #ee4941;
        font-size: 28px;
        line-height: 80px;
        color: #ffffff;
        text-align: center;
      }
      .submit.noAgree{
        background-color: #ddd;
      }
    }
  }
</style>
